import React, { Component } from 'react';
import BasicComponent from './basicComponent';


/**
 * 高阶组件：反向继承，集成基础组件的功能
 * @param {*} BasicComponent 
 */
let withHighLevel = (BasicComponent)=>{

    return class extends BasicComponent {
        constructor(props){
            super(props)
        }
        componentDidMount(){
            console.log("HighLevelComponent componentDidMount~");
            console.log("this:",this);
            this.renderChart();
            this.linstenChartClick();
        }
        componentWillReceiveProps(nextProps){
            if(nextProps.className!==this.props.className){
                this.myChart.resize({
                    width: 200,
                    height: 100,
                    silent: false
                })
            }
        }
        //此处可封装高阶组件自定义方法
        linstenChartClick(){
            this.myChart.on("click",(params) => {
                console.log("高阶组件图表点击事件参数，params:",params);
            })
        }
        //此处可用渲染劫持基础组件
        render() {
            console.log("this.state:",this.state);
            console.log("this.props:",this.props);

            return (
                super.render()
            );
        }
    }
}


let HighLevelComponent = withHighLevel(BasicComponent)

export default HighLevelComponent;